/**
* 作者 ：食草狂魔
*
* 日期 ：2017/11/27
*
* 描述 ：系统管理组件 - 编辑角色
*/
<template>
  <div class="dialogContent">
    <el-form class="addRoleForm" :rules="rules" label-position="right" label-width="110px" ref="updateRoleForm" :model="ruleForm">
      <el-row class="dialogBar">
        <el-col class="title">角色管理</el-col>
      </el-row>
      <el-form-item label="角色名 :" prop="name" style="margin-top: 20px;">
        <el-input v-model="ruleForm.name" class="longText"></el-input>
      </el-form-item>
      <el-form-item label="角色描述 :" prop="description">
        <el-input type="textarea" v-model="ruleForm.description" class="longText" rows="5"></el-input>
      </el-form-item>
      <el-row class="dialogBar">
        <el-col class="title">权限设置</el-col>
      </el-row>
      <el-form-item label-width="0px" prop="sysResourceIds" style="margin-top: 20px;">
        <el-checkbox-group v-model="ruleForm.sysResourceIds" size="small">
          <el-checkbox-button :label="item.sysResourceId"  style="margin-left: 10%;margin-bottom: 10px;" v-for="item in powerList">{{item.sysResourceName}}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label-width="0px" style="margin-top: 20px;text-align: center;">
        <el-button class="moduleButton button" type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button class="button" type="info" @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import roleAPIs from '../../../../api/roleAPIs'
  export default {
    props: ["parentModel", "updateRoleformData"],
    name: "addRoleForm",
    data () {
      return {
        ruleForm: {
          sysRoleId: "",
          name: "",
          description: "",
          sysResourceIds: [],
          token: localStorage.token
        },
        rules:{
        	name:[
        		{ required: true, message: '请填写内容', trigger: 'blur' }
        	]
        },
        powerList: []
      }
    },
    mounted: function () {

      let vm = this
//      debugger
      vm.ruleForm.sysRoleId = vm.$props.updateRoleformData.sysRoleId
      vm.ruleForm.name = vm.$props.updateRoleformData.sysRoleName
      vm.ruleForm.description = vm.$props.updateRoleformData.description
      vm.ruleForm.sysResourceIds = vm.$props.updateRoleformData.resources ? vm.$props.updateRoleformData.resources.split(",") : []

//      console.log(vm.$props.updateRoleformData)
//      console.log(vm.sysResourceIds)
      roleAPIs.listToResourceAll({
        token: localStorage.token
      }).then(({data}) => {
        if (data.code == 10000) {
          vm.powerList = data.data
        }
      })
    },
    methods: {
      submitForm (formName) {
        let vm = this
        vm.$refs.updateRoleForm.validate((valid) => {
          if (valid) {
          	if(vm.ruleForm.sysResourceIds.length == 0){
	          	vm.$message.warning("请设置权限")
	        	}else{
	        		debugger
			        vm.ruleForm.sysResourceIds = vm.ruleForm.sysResourceIds?vm.ruleForm.sysResourceIds.join(","):""
			        roleAPIs.update(vm.ruleForm).then(({ data }) => {
			          if(data.code == 10000) {
			            vm.$message.success('编辑角色成功！')
			            vm.$parent.visible = false
			            vm.$refs.updateRoleForm.resetFields()
			//            console.log(vm.$props.parentMode)
			//            let parnetModel = vm.$parent.$parent.$parent
			            vm.$props.parentModel.tableOptions.pageInfo.currentPage = 1
			            vm.$props.parentModel.loadData(vm.$props.parentModel.tableOptions.pageInfo.currentPage, vm.$props.parentModel.tableOptions.pageInfo.pageSize)
			          }
			          else {
			            vm.$message.error('编辑角色失败 !');
			          }
			        })
	        	}
          }else{
          	return false
          }
        }); 	
      },
      resetForm () {
        let vm = this
        vm.$parent.visible = false
      }
    }
  }
</script>
<style>
  .dialogContent .longText {
    width: 96%;
  }
  .addRoleForm .el-checkbox-button .el-checkbox-button__inner{
    border: 0;
    border-radius: 0;
  }
  .addRoleForm .button{
    width: 120px;
    margin-right: 5%;
  }
</style>
